<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区 -->
    <el-card>
      <!-- 列表区域 -->
      <el-tabs type="border-card" style="margin-top:10px">
        <el-tab-pane>
          <template #label>全部</template>
          <el-row>
            <el-col :span="7">
              <el-input placeholder="请输入用户账号" v-model="userQuery.query" @keyup.enter="getUserList()" clearable @clear="getUserList()">
                <template #append><el-button icon="el-icon-search" @click="getUserList()"></el-button></template>
              </el-input>
            </el-col>
            <el-col :span="17"></el-col>
          </el-row>
          <el-table :data="userList" stripe border style="width: 100%">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="用户账号" prop="phone"></el-table-column>
            <el-table-column label="岗位" prop="roleName"></el-table-column>
            <el-table-column label="状态">
              <template v-slot="scope">
                <span v-if="scope.row.status===0">未审核</span>
                <span v-if="scope.row.status===2">已通过</span>
                <span v-if="scope.row.status===1">已拒绝</span>
                <span v-if="scope.row.status===3">已注销</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="260px">
              <template v-slot="scope">
                <!-- 如果该成员申请注册本公司，且还未通过，才显示此按钮 -->
                <el-button size="mini" type="primary" icon="el-icon-success" :disabled="scope.row.status!=0" @click="acceptUser(scope.row)">通过</el-button>
                <el-button size="mini" type="warning" icon="el-icon-error" :disabled="scope.row.status!=0" @click="rejectUser(scope.row)">拒绝</el-button>            
                <!-- 如果成员属于本公司，才显示删除按钮 -->
                <el-button size="mini" type="danger" icon="el-icon-delete" :disabled="scope.row.status!=2" @click="cancelUser(scope.row)">注销</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-config-provider :locale="locale">
            <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="userQuery.pagenum"
              :page-sizes="[1, 2, 5, 10]"
              :page-size="userQuery.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="userTotal"
            ></el-pagination>
          </el-config-provider>
        </el-tab-pane>
        <el-tab-pane>
          <template #label>未审核</template>
          <el-row>
            <el-col :span="7">
              <el-input placeholder="请输入用户账号" v-model="unUserQuery.query" @keyup.enter="getUncheckUserList()" clearable @clear="getUncheckUserList()">
                <template #append><el-button icon="el-icon-search" @click="getUncheckUserList()"></el-button></template>
              </el-input>
            </el-col>
            <el-col :span="17"></el-col>
          </el-row>
          <el-table :data="uncheckUserList" stripe border style="width: 100%">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="用户账号" prop="phone"></el-table-column>
            <el-table-column label="岗位" prop="roleName"></el-table-column>
            <el-table-column label="操作" min-width="260px">
              <template v-slot="scope">
                <el-button size="mini" type="primary" icon="el-icon-success" :disabled="scope.row.status!=0">通过</el-button>
                <el-button size="mini" type="warning" icon="el-icon-error" :disabled="scope.row.status!=0">拒绝</el-button>            
              </template>
            </el-table-column>
          </el-table>
          <el-config-provider :locale="locale">
            <el-pagination
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
              :current-page="unUserQuery.pagenum"
              :page-sizes="[1, 2, 5, 10]"
              :page-size="unUserQuery.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="unUserTotal"
            ></el-pagination>
          </el-config-provider>
        </el-tab-pane>
        <!-- <el-tab-pane>
          <template #label>已审核</template>
          <el-table :data="checkedUserList" stripe border style="width: 100%">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="用户账号" prop="phone"></el-table-column>
            <el-table-column label="岗位" prop="role"></el-table-column>
            <el-table-column label="状态">
              <template v-slot="scope">
                <span v-if="scope.row.status===1">已通过</span>
                <span v-if="scope.row.status===2">已拒绝</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="260px">
              <template v-slot="scope">
                <el-button size="mini" type="danger" icon="el-icon-delete" :disabled="scope.row.status!=1">注销</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane> -->
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import zhCn from "element-plus/lib/locale/lang/zh-cn";
export default {
  data(){
    return{
      userQuery: {
        query: "",
        pagenum: 1, 
        pagesize: 5 
      },
      userTotal: 0,
      unUserQuery: {
        query: "",
        pagenum: 1, 
        pagesize: 5 
      },
      unUserTotal: 0,
      userList:[],
      uncheckUserList:[],
      checkedUserList:[],
    }
  },
  mounted() {
    this.getUncheckUserList();
    this.getUserList();
  },
  setup() {
    return {
      locale: zhCn
    };
  },
  methods: {
    async getUserList() {
      const { data: res } = await this.$http.get("user/getUserList", { params: this.userQuery });
      if (res.code !== 200){return this.$message.error(res.msg);}
      this.userList = res.data.list;
      this.userTotal = res.data.total;
    },
    async getUncheckUserList() {
      const { data: res } = await this.$http.get("user/getUncheckUserList", { params: this.unUserQuery});
      if (res.code !== 200){return this.$message.error(res.msg);}
      this.uncheckUserList = res.data.list;
      this.unUserTotal = res.data.total;
    },
    async acceptUser(user){
      const confirmRes = await this.$confirm("确认通过该用户？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).catch(err => console.log(err));
      if (confirmRes !== "confirm") { return this.$message.info("取消通过");}
      let formData = new FormData();
      formData.append('id',user.id);
      const { data: res } = await this.$http.post('user/acceptUser',formData)
      if (res.code !== 200) return this.$message.error(res.msg);
      this.$message.success("该用户申请已通过");
      this.getUserList();
      this.getUncheckUserList();
    },
    async rejectUser(user){
      const confirmRes = await this.$confirm("确认拒绝该用户？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).catch(err => console.log(err));
      if (confirmRes !== "confirm") { return this.$message.info("取消拒绝");}
      let formData = new FormData();
      formData.append('id',user.id);
      const { data: res } = await this.$http.post('user/rejectUser',formData)
      if (res.code !== 200) return this.$message.error(res.msg);
      this.$message.success("该用户申请已拒绝");
      this.getUserList();
      this.getUncheckUserList();
    },
    async cancelUser(user){
      const confirmRes = await this.$confirm("确认注销该用户？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).catch(err => console.log(err));
      if (confirmRes !== "confirm") { return this.$message.info("取消注销");}
      let formData = new FormData();
      formData.append('id',user.id);
      const { data: res } = await this.$http.post('user/cancelUser',formData)
      if (res.code !== 200) return this.$message.error(res.msg);
      this.$message.success("该用户已注销");
      this.getUserList();
      this.getUncheckUserList();
    },
    handleSizeChange1(newSize) {
      this.userQuery.pagesize = newSize;
      this.getUserList();
    },
    handleCurrentChange1(newPage) {
      this.userQuery.pagenum = newPage;
      this.getUserList();
    },
    handleSizeChange2(newSize) {
      this.unUserQuery.pagesize = newSize;
      this.getUncheckUserList();
    },
    handleCurrentChange2(newPage) {
      this.unUserQuery.pagenum = newPage;
      this.getUncheckUserList();
    },
  }
}
</script>